<template>
    <div id="box2">
        <h2>教师信息</h2>
        <p>教师姓名:{{ teaName }}</p>
        <p>教师年龄:{{ age }}</p>
        <p>教师性别:{{ sex }}</p>
    </div>
</template>

<script>
  export default {
      name: "TeacherView",  //设置组件在浏览器调试工具中展示的名字
      data: function () {
          return {
              teaName: 'xiaoming',
              age: 30,
              sex: '男'
          }
      }
  }
</script>
<!--
   scoped : 设置样式的作用域    当前组件有效
-->
<style scoped>

 #box2 {
    width: 500px;
    height: 500px;
    border: 2px solid yellowgreen;
    margin-bottom: 10px;
    text-align: center;
}

 #box2 {
     font-size: 40px;
     background-color: pink;
 }
</style>